<template>
    <div ref="vrBox"></div>
</template>
  
<script setup>
import { ref, onMounted } from 'vue'
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
// three.js坐标系为右手坐标系

const vrBox = ref(null)
const poiObjects = []
// 创建场景
const scene = new THREE.Scene()
scene.background = new THREE.Color('black')

// 创建摄像机
// 视角、长宽比、近裁切面、远裁切面
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000)
// camera.position = 2

// 光源
const color = 0xffffff
const intensity = 1
const light = new THREE.DirectionalLight(color, intensity)
light.position.set(0, 0, 2)
scene.add(light)

// 球体
const initContent1 = () => {
    let sphereGeometry = new THREE.SphereGeometry(16, 50, 50);
    let texture = new THREE.TextureLoader().load('https://img.zcool.cn/community/016c3e5e708707a80121651809e146.jpg@3000w_1l_0o_100sh.jpg');
    let sphereMaterial = new THREE.MeshBasicMaterial({ map: texture });
    sphereGeometry.scale(16, 16, -16);
    const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    scene.add(sphere);


    // 创建射线检测器
    const raycaster = new THREE.Raycaster()
    const mouse = new THREE.Vector2()

    // 监听鼠标点击事件
    window.addEventListener('click', onMouseClick, false)

    function onMouseClick(event) {
        // 计算鼠标点击位置的归一化设备坐标
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1

        // 更新射线检测器
        raycaster.setFromCamera(mouse, camera)

        // 获取与射线相交的物体数组
        const intersects = raycaster.intersectObjects(scene.children, true)
        // 1286 1285 1337
        console.log(intersects);
        const A = intersects[0].face.a;
        const B = intersects[0].face.b;
        const C = intersects[0].face.c;

        // 判断是否与球体相交
        if (intersects.length > 0 && intersects[0].object === sphere) {
            if (A === 1438 && B === 1489 && C === 1490) {
                UpnewTexture(sphere, 'https://img.zcool.cn/community/01f17259b405eba8012028a91b2153.jpg@1280w_1l_2o_100sh.jpg');
            }
            if (A === 1388 && B === 1439 && C === 1440) {
                // 加载新的图片纹理
                UpnewTexture(sphere, 'https://img.zcool.cn/community/018bea5e70870aa80120a895c33511.jpg@1280w_1l_2o_100sh.jpg');
            }
            console.log('点击了球体')
        }
    }
}

// 按钮/标记数据
const hotPoints = [
    {
        position: {
            x: -45,
            y: -40,
            z: -245
        },
        detail: {
            title: '卧室'
        }
    },
    {
        position: {
            x: -60,
            y: -50,
            z: -220
        },
        detail: {
            title: '厨房'
        }
    }
]

// 添加按钮函数
const renderBtnList = () => {
    // 添加按钮列表
    var pointTexture = new THREE.TextureLoader().load('https://s.aigei.com/prevfiles/c381090d09df41c4b762f1cebda0c9a3.png?e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:ZSfADDSjEJcyhH33WI-071oomKo=')
    var material = new THREE.SpriteMaterial({ map: pointTexture })

    hotPoints.forEach((point) => {
        const sprite = new THREE.Sprite(material)
        sprite.scale.set(10, 10, 10)
        sprite.position.set(point.position.x, point.position.y, point.position.z)

        sprite.detail = point.detail
        // sprite.position = point.position
        poiObjects.push(sprite)

        scene.add(sprite)
    })
}

renderBtnList();

// 更换贴图函数 第一个参数是球体的实例 第二个是贴图的路径
const UpnewTexture = (sphere, imgUrl) => {
    // 加载新的图片纹理
    const newTexture = new THREE.TextureLoader().load(imgUrl)
    newTexture.wrapS = THREE.RepeatWrapping
    newTexture.wrapT = THREE.RepeatWrapping
    newTexture.repeat.set(1, 1)

    // 更新球体的材质
    sphere.material.map = newTexture
    sphere.material.needsUpdate = true
}

initContent1()


onMounted(() => {
    // 添加渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.setSize(window.innerWidth, window.innerHeight)
    vrBox.value.appendChild(renderer.domElement)
    //镜头控制器
    const controls = new OrbitControls(camera, renderer.domElement)
    camera.position.set(-50, 10, -10)
    controls.enableZoom = true
    controls.update()
    function animate() {
        renderer.render(scene, camera)
        controls.update()
        requestAnimationFrame(animate)
    }
    requestAnimationFrame(animate)
})
</script>
  